<template>
  <div class="app-container">
    <el-row :gutter="20" style="margin-left:0;margin-right: 0;">
      <el-col :span="3" :xs="24" style="background-color: #f8f8f8;">
        <div class="headerContent">
          <span class="extendedHeader name">{{dataInfo.name}}</span>
<!--          <span class="extendedHeader content">{{dataInfo.type}}</span>-->
<!--          <span class="extendedHeader content">{{dataInfo.revision}}</span>-->
        </div>
      </el-col>
      <el-col :span="21" :xs="24">
        <div class="headerContent ">
          <el-row class="inline-block">
            <span class="extendedHeader content">状态：</span>
            <span class="extendedHeader content">{{dataInfo.current}} </span>
          </el-row>
          <el-row class="inline-block">
            <span class="extendedHeader content">类型：</span>
            <span class="extendedHeader content">{{dataInfo.type}} </span>
          </el-row>
          <el-row class="inline-block">
            <span class="extendedHeader content">版本：</span>
            <span class="extendedHeader content">{{dataInfo.revision}} </span>
          </el-row>
          <el-row class="inline-block">
            <span class="extendedHeader content">所有者：</span>
            <span class="extendedHeader content">{{dataInfo.owner}}</span>
          </el-row>
          <el-row class="inline-block">
            <span class="extendedHeader content">修改日期：</span>
            <span class="extendedHeader content">{{dataInfo.modified}}</span>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-button v-if="!show" class="collapesbutton" type="primary" plain style="left:0;top:100px;height:10%;" @click="handleShow()"><i :class="show?'el-icon-d-arrow-left':'el-icon-d-arrow-right'"></i></el-button>
    <el-row :style="'height: calc(100% - 47px);margin-left:'+(show?'0':'14px')+';margin-right:'+(show?'0':'14px;')">
      <el-col v-if="show" :span="3" :xs="24" class="treeMenu">
      <el-button class="collapesbutton" type="primary" plain style="right:1px;top:50px;height:10%;" @click="handleShow()"><i :class="show?'el-icon-d-arrow-left':'el-icon-d-arrow-right'"></i></el-button>
        <el-tabs type="border-card" v-model="activeName">
          <el-tab-pane name="treeMenu" v-if="treeMenu.length>0" style="padding: -15px;">
            <span slot="label"><i class="el-icon-tickets"></i></span>
            <el-menu style="padding: 0"
                     :default-active="activeIndex"
                     class="el-menu-vertical">
              <el-menu-item v-for="(item,i) in treeMenu" :index="i.toString()" @click="handleOpen(item.url,item.pageParams)">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.name }}</span>
              </el-menu-item>
            </el-menu>
          </el-tab-pane>
          <el-tab-pane name="treeData" v-if="treeData.length>0" style="padding: -15px;">
            <span slot="label"><i class="el-icon-document"></i></span>
            <el-menu style="padding: 0"
                     :default-active="activeIndex"
                     class="el-menu-vertical"
                     @open="handleOpen"
                     @close="handleClose">
              <el-menu-item :index="i.id" v-for="i in treeData">
                <i :class="i.icon"></i>
                <span>{{ i.name }}</span>
              </el-menu-item>
            </el-menu>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="show?21:24" :xs="24" style="padding:10px 10px 0;height:100%;">
        <el-row class="page-title">
          <el-dropdown v-if="toolbarData.length>4">
            <span class="el-dropdown-link">
              <i class="el-icon-menu"></i>
              <i class="el-icon-arrow-down"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(btn, key) in toolbarData" v-if="btn.status==='1'" @click="clickEvent(btn.type,btn.url)">{{ btn.name }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="flex" v-if="toolbarData.length<=4">
            <template v-for="(btn, key) in toolbarData">
              <el-button
                v-if="btn.status==='1'"
                :type="btn.styleType"
                :icon="btn.icon"
                size="mini"
                @click="clickEvent(btn.type,btn.url)"
              >{{ btn.name }}
              </el-button>
            </template>
          </div>
        </el-row>

        <div class="mainContent">
          <el-row v-if="formData.length>0">
            <el-col class="flex" v-for="from in formData" :span="from.span">
              <span class="extendedMain fromTitle">{{from.name}}：</span>
              <span class="extendedMain content">{{menuDataInfo[from.prop]}} </span>
            </el-col>
          </el-row>

          <template v-if="columns.length>0">
            <!--列表数据-->
            <!-- <el-row style="height:70%;"> -->
            <dynamic-table :list="tableData" @handleSelectionChange="handleSelectionChange" :options="options"
                          :columns="columns" :operates="operates">
            </dynamic-table>
            <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
                        @pagination="getMenuDataInfo('table')"/>
          </template>

        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getDataList,getConfigInfo } from '@/api/dynamic/dynamicDetails'
import dynamicSearchForm from "@/views/components/dynamicSearchForm";
import dynamicTable from "@/views/components/dynamicTable";

export default {
  components: {
    dynamicSearchForm,
    dynamicTable
  },
  data() {
    return {
      options: {// table 的参数
        stripe: true, // 是否为斑马纹 table
        loading: false, // 是否添加表格loading加载动画
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        mutiSelect: true // 是否支持列表项选中功能
      },
      total:0,
      allData:[],
      pageTitle:'',
      url:'',
      menuUrl:'',
      params:{},
      toolbarData: [],
      formData: [],
      tableData: [],
      treeMenu:[],
      treeData:[],
      checkedColumns: [],
      columns: [],// 需要展示的列
      queryParams:{},
      queryMenuParams:{},
      menuDataInfo:{},
      listQuery:{
        pageNum: 1,
        pageSize: 10,
      },
      operates: {// 列操作按钮
        width: 150,
        list: []
      },
      activeName: 'treeMenu',
      show:true,
      activeIndex:"0",
      dataInfo:'',
      menuData:''
    }
  },
  created() {
    let params = this.$route.query;
    if(typeof params.pageParams == 'string'){
      this.params=params=JSON.parse(sessionStorage.getItem('api_details'+this.$route.params.Id));
      this.$route.meta.breadcrumb=params.breadcrumb
    }else{
      params.breadcrumb = this.$route.meta.breadcrumb
      sessionStorage.setItem('api_details'+this.$route.params.Id,JSON.stringify(params));
      this.params=params;
    }
    if(params.pageParams){
      this.queryParams.toolbar=params.pageParams.toolbar;
      this.queryParams.treeMenu=params.pageParams.treeMenu;
      this.url=this.getUrl(params.pageParams.url);
      this.getConfig();
    }else{
      this.msgError("缺少参数");
      return false;
    }
  },
  methods: {
    /** 获取配置信息 */
    getConfig(){
      this.loading = true;
      getConfigInfo(this.queryParams).then(response => {
        this.treeMenu = response.data.treeMenuData;
        this.toolbarData = response.data.toolbarData;
        this.loading = false;
        this.getDataInfo();
        this.handleOpen(this.treeMenu[0].url,this.treeMenu[0].pageParams);
      })
    },
    getMenuConfig(type){
      this.loading = true;
      getConfigInfo(this.queryMenuParams).then(response => {
        this.columns = response.data.tableData;
        this.formData = response.data.showFormData;
        this.operates.list = response.data.commandData;
        if(type=='table'){
          this.allData=[];
        }
        this.getMenuDataInfo(type);
        this.loading = false;
      })
    },
    /** 获取数据 */
    getDataInfo(){
      this.loading = true;
      getDataList(this.url).then(response => {
        this.dataInfo = response.data[0];
        this.loading = false
      })
    },
    getMenuDataInfo(type){
      this.loading = true;
      if(type=='form'){
        getDataList(this.menuUrl).then(response => {
            this.menuDataInfo = response.data[0];
            this.loading = false
        })
      }else if(type=='table'){
        var begin=this.listQuery.pageNum*this.listQuery.pageSize-this.listQuery.pageSize;
        var end=this.listQuery.pageNum*this.listQuery.pageSize;
        if(this.allData.length>0){
          this.tableData = this.allData.slice(begin, end);
        }else{
          getDataList(this.menuUrl).then(response => {
            this.allData = response.data;
            this.tableData = this.allData.slice(begin, end);
            this.total = response.total;
            this.loading = false
          })
        }
      }
    },
    handleOpen(url,pageParams) {
      this.formData=[];
      this.columns=[];
      this.operates.list=[];
      this.queryMenuParams={};
      // pageParams =eval ("(" + pageParams + ")");
      pageParams =JSON.parse (pageParams.replace(/'/g,'"'));
      if(pageParams.table!=='' && pageParams.table!==undefined){
        this.queryMenuParams.table=pageParams.table;
        this.menuUrl=this.getUrl(url);
        this.getMenuConfig('table');
      }
      if(pageParams.showForm!=='' && pageParams.showForm!==undefined){
        this.queryMenuParams.showForm=pageParams.showForm;
        this.menuUrl=this.getUrl(url);
        this.getMenuConfig('form');
      }
      if(pageParams.command!=='' && pageParams.command!==undefined){
        this.queryMenuParams.command=pageParams.command;
      }
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    clickEvent(){

    },
    handleShow(){
      // console.log(this.tableData);return
      this.show=!this.show
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
  }
}
</script>
<style scoped>
.app-container{
  margin: 0;
  padding:0;
  position: relative;
}
.collapesbutton{
  width:14px;
  position: absolute;
  top:0;
  bottom:0;
  padding: 0;
  border:none;
  margin:auto 0;
  z-index: 200;
}
.treeMenu{
  background-color: #f8f8f8;
  height: 100%;
  position: relative;
}
.el-menu-item{
  border-bottom: 1px solid #DCDFE6;
}
.treeMenu .el-tabs--border-card{
  height: 100%;
}
.app-container .head-container{
  padding-left: 5px;
  padding-right: 5px;
  border-top: 1px solid #d8d8d8;
}

.el-tabs__item{
  height:30px;
  line-height: 30px;
}
.page-title{
  background: #fff;
  border: 1px solid #D8D8D8;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
  /*margin-bottom: 5px;*/
}
.headerContent{
  float: left;
  padding: 20px 0 10px;
  width: 100%;
  border-bottom: 1px solid #ccc;
}
.extendedHeader{
  display: block;
  line-height: 23px;
  white-space: nowrap;
}
.extendedHeader.name{
  font-size: 16px;
  font-weight: bold;
  font-family: "3dsregular", Arial, Helvetica, sans-serif;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.extendedHeader.content{
  font-size: 13px;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  float: left;
}
.extendedHeader.fromTitle{
  font-size: 13px;
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.inline-block{
  display: inline-block;
  margin-right: 20px;
}
.infinite-list{
  list-style: none;
  padding: 5px;
  margin: 0;
}
.infinite-list-item{
  list-style: none;
  padding: 5px;
  margin: 0;
  background-color: #f8f8f8;
  border-bottom: 1px solid #d8d8d8;
  position: relative;
}
.infinite-list-item.selected{
  list-style: none;
  padding: 5px;
  margin: 0;
  background-color: #fff;
  border-bottom: 1px solid #d8d8d8;
  position: relative;
}
.el-dropdown{
  padding: 10px;
  border-right: 1px solid #C3C3C3;
}
.mainContent{
  float: left;
  width: 100%;
  height:100%;
}
.extendedMain{
  display: block;
  line-height: 23px;
  white-space: nowrap;
}
.extendedMain.name{
  font-size: 16px;
  font-weight: bold;
  font-family: "3dsregular", Arial, Helvetica, sans-serif;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.extendedMain.content{
  font-size: 13px;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 5px 0 5px 10px;
}
.extendedMain.fromTitle{
  font-size: 13px;
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 5px 0 5px 10px;
  background-color: #f8f8f8;
}
.flex{
  display: flex;
}
</style>
